<template>
  <div>
    <el-dialog v-if="this.instance !== null"
      title="插入图片"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose" append-to-body>
<!--      <image-upload ></image-upload>-->
      <my-upload v-model="listImg" @input="setListImg"></my-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editorAddImg">确 定</el-button>
      </span>
    </el-dialog>
    <div id="editormdid">
      <textarea v-model="content"></textarea>
    </div>
  </div>
</template>

<script>
import myUpload from "@/components/myUpload/singleUpload"

export default {
  name: 'editorMd',
  components: {myUpload},
  props: {
    content:{
      type: String,
      default: ''
    },
  },
  data() {
    return {
      instance: null,
      dialogVisible: false,
      listImg:  null,
    };
  },
  mounted() {
    this.initEditor();
    // 将分享方法绑定在window上
    window['setEditorUploadImg'] = () => {
      this.dialogVisible = true;
    }
  },
  methods: {
    initEditor() {
      this.instance = window.editormd("editormdid", {
        height: 500,
        emoji: true,
        path: '/static/editor/lib/',
        //支持保存HTML
        saveHTMLToTextarea: true,
        //图片上传
        // imageUpload:false,
        // imageFormats: ["jpg","png"],
        // imageUploadURL: process.env.VUE_APP_BASE_API + "/blog/uploadfile",
        toolbar: true,
        onload: function (){
          window.setEditorContent();
        },
        toolbarIcons:function () {
          return editormd.toolbarModes['full'];
        },
        onmyupload: function (){
          window.setEditorUploadImg();
        }
      });
    },
    getEditorHtml() {
      return this.instance.getHTML();
    },
    getEditorContent() {
      return this.instance.getValue();
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    setListImg(arg){
      if(arg != null){
        this.listImg = arg;
      }
    },
    editorAddImg(){
      this.dialogVisible = false;
      var arr = this.listImg.split(",");
      for(let i = 0; i < arr.length; i++){
        this.instance.appendMarkdown("![](" + arr[i] + ")\n");
      }
    },
    editorSetContent(str){
      this.instance.setMarkdown(str);
    }
  },
};
</script>
